<template>
<div id="listViewTop">

    <div class="listview_top">
        <div class="listview_top_bottom">
            <span class="iconfont icon-zuojiantou" @click="goBack"></span>
            <span>官方动态歌单</span>
            <span class="iconfont icon-sousuo"></span>
            <span class="iconfont icon-gengduo-shuxiang"></span>
        </div>
        <div class="listview_top_top">
            <img class="srcImg" :src="playlist.coverImgUrl" alt="">
        </div>
        <div class="dongtai">
            <div class="dongtai_left">
                <img :src="playlist.coverImgUrl" alt="">
                <div class="bofang">
                    <span class="iconfont icon-24gl-play"></span>
                    {{changeValue(playlist.playCount)}}
                </div>
            </div>
            <div class="dongtai_right">
                <div>{{playlist.name}}</div>
                <div>
                    <span>头像</span>
                    <span>作者</span>
                    <span>+</span>
                </div>
                <div>
                    <span>描述</span>
                    <span> > </span>
                </div>
            </div>

        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "ListViewTop",
    data() {
        return {

        }
    },
    props: {
        // srcImg: String
        playlist: {
            type: Object
        }
    },
    methods: {
        goBack: function () {
            this.$router.go(-1);
        },
        changeValue: function (num) {
            let res = 0;
            if (num >= 100000000) {
                res = num / 100000000;
                //toFixed是截取小数点后的位数
                res = res.toFixed(1) + '亿';
            } else if (num >= 10000) {
                res = num / 10000;
                res = res.toFixed(1) + '万';
            }
            return res;
        },
    },
    components: {}
}
</script>

<style lang="less" scoped>
.listview_top {

    .listview_top_bottom {
        position: fixed;
        top: 0;
        z-index: 99;
        height: .8rem;
        color: #fff;
        display: flex;
        justify-content: left;
        align-items: center;

        span {
            padding-left: .2rem;

            &:nth-of-type(1) {
                font-size: .5rem;
            }

            &:nth-of-type(2) {
                font-weight: 800;
                font-size: .35rem;
                width: 5.2rem;
            }

            &:nth-of-type(3) {
                font-weight: 800;
            }

            &:nth-of-type(4) {
                font-weight: 800;
                font-size: .5rem;
                padding-right: .2rem;
                float: right;
            }
        }
    }

    .listview_top_top {
        z-index: -1;
        position: relative;
        width: 100%;
        height: 4rem;

        .srcImg {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: auto;
        }

        &::after {
            content: '';
            position: absolute;
            background-color: rgba(44, 43, 43, .7);
            width: 100%;
            height: 7.5rem;
            top: 0;
            left: 0;
            z-index: 1;
        }
    }

    .dongtai {
        position: absolute;
        z-index: 2;
        display: flex;
        top: 1.8rem;

        .dongtai_left {
            width: 2.7rem;
            height: 2.7rem;
            // background-color: red;
            position: relative;
            padding-left: .2rem;

            >img {
                width: 2.6rem;
                border-radius: .3rem;
            }

            .bofang {
                position: absolute;
                top: .1rem;
                right: .1rem;
                background-color: rgba(22, 21, 21, 0.6);
                color: #dbd7d7;
                border-radius: .5rem;
                padding: .05rem;
                font-weight: 400;
                display: flex;
                align-items: center;
                font-size: .25rem;

                span {
                    font-size: .3rem;
                }
            }
        }
        .dongtai_right{
            color: #fff;
            padding: 0 .3rem;

            div{
                padding-bottom: .25rem;
                &:nth-of-type(1){
                    font-weight: 500;
                    font-size: .4rem;
                }
                &:nth-of-type(2){
                    span{
                        padding-right: .2rem;
                        &:nth-of-type(3){
                            background-color: rgba(10, 10, 10,.4);
                            padding: 0 .2rem;
                            border-radius: 2rem;
                        }
                    }
                }
            }
        }
    }
}
</style>
